<template>
  <div class="homePage">
    <!-- 左侧边栏 -->
    <div class="page-left">
      <div class="slid-title">
        <img src="@/assets/images/robot.png" alt="图片加载失败" />
        智明矿通
      </div>
      <div class="slid-list">
        <div class="slid-item" :class="{ active: currentTab == 0 }" @click="handleTabCut(0)">
          <img src="@/assets/images/icon_znwd.png" alt="图片加载失败" />
          智能问答
        </div>
        <div class="slid-item" :class="{ active: currentTab == 1 }" @click="handleTabCut(1)">
          <img src="@/assets/images/icon_znjs.png" alt="图片加载失败" />
          智能检索
        </div>
      </div>
      <div class="slid-line" />
      <div class="user-body" v-popover="popoverRef" v-click-outside="onClickOutside">
        <img :src="userAcatar" alt="图片加载失败" />
        {{ username }}
        <el-icon v-if="userIconStatus == false">
          <ArrowDown />
        </el-icon>
        <el-icon v-else>
          <ArrowUp />
        </el-icon>
      </div>
      <el-popover ref="popoverRef" trigger="click" placement="top" @show="onClickShow" @hide="onClickHide" width="112"
        popper-class="user-popover" :teleported="false" virtual-triggering persistent>
        <p class="user-body-p" @click="loginOut(1)">
          <svg-icon iconClass="qiehuan" />切换账号
        </p>
        <el-divider class="user-body-divider" />
        <p class="user-body-p" @click="loginOut(2)">
          <svg-icon iconClass="tuichu" />退出登录
        </p>
      </el-popover>
    </div>
    <div class="page-container">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" :key="$route.name" :userAcatar="userAcatar" v-if="$route.meta.keepAlive" />
        </keep-alive>
        <component :is="Component" :key="$route.name" :userAcatar="userAcatar" v-if="!$route.meta.keepAlive" />
      </router-view>
    </div>
    <!-- 登录 -->
    <login ref="loginRef" @handleOk="handleOk"></login>
  </div>
</template>
<script lang="ts" setup>
import { ref, unref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ClickOutside as vClickOutside } from "element-plus";
import { ArrowUp, ArrowDown } from "@element-plus/icons-vue";

const router = useRouter();
const route = useRoute();
const token = sessionStorage.getItem("token");
let currentTab = ref<number>(0);
if (route.name == "Retrieval") {
  currentTab.value = 1;
} else if (route.name == "QuestionsAnswers") {
  currentTab.value = 0;
}

// 左侧菜单点击
function handleTabCut(type) {
  currentTab.value = type;
  if (type == 0) {
    router.push("/system/questionsAnswers");
  } else if (type == 1) {
    router.push("/system/retrieval");
  }
}
// 用户点击
const userIconStatus = ref(false);
const popoverRef = ref();
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.();
};
const onClickShow = () => {
  userIconStatus.value = !userIconStatus.value;
};
const onClickHide = () => {
  userIconStatus.value = !userIconStatus.value;
};

// 初始化
const loginRef = ref();
let userAcatar = ref<string>("");
let username = ref<string>("");
requestAnimationFrame(() => {
  if (!token) {
    localStorage.clear();
    sessionStorage.clear();
    loginRef.value.handDialog();
  } else {
    userAcatar.value = JSON.parse(sessionStorage.getItem("userInfo")).avatar;
    username.value = JSON.parse(sessionStorage.getItem("userInfo")).realname;
  }
});
// 登录成功后的回调
const handleOk = () => {
  userAcatar.value = JSON.parse(sessionStorage.getItem("userInfo")).avatar;
  username.value = JSON.parse(sessionStorage.getItem("userInfo")).realname;
}
// 退出登录
function loginOut(type) {
  // localStorage.removeItem("username");
  // localStorage.removeItem("password");
  // localStorage.removeItem("rememberPassword");
  // sessionStorage.removeItem("token");
  localStorage.clear();
  sessionStorage.clear();
  if (type == 1) {
    // 切换用户giitt
    loginRef.value.handDialog();
  } else if (type == 2) {
    // 退出登录
    loginRef.value.handDialog();
  }
}
</script>

<style scoped lang="scss">
.homePage {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 100vh;
  box-sizing: border-box !important;
  background: url("@/assets/images/bg.png") no-repeat;
  background-size: 100% 100%;

  .page-left {
    width: 220px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    padding: 16px;
    box-sizing: border-box !important;

    .slid-title {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
      font-size: 26px;
      font-family: FZZhengHeiS, FZZhengHeiS-Regular;
      font-weight: 600;
      text-align: left;
      color: #1e2024;
      margin-bottom: 10px;

      img {
        width: 45px;
        height: 45px;
        margin: 6px 6px 0 0;
      }
    }

    .slid-list {
      height: calc(100% - 122px);
      margin-left: 10px;

      .slid-item {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 600;
        color: #292929;
        border-radius: 8px;
        padding: 7px 12px;
        box-sizing: border-box;
        margin: 6px 0;
        cursor: pointer;
        user-select: none;

        &.active {
          background: rgba(36, 85, 255, 0.16);
        }

        &:hover {
          background: rgba(0, 0, 0, .06);
        }

        img {
          width: 30px;
          height: 30px;
          margin-right: 10px;
        }
      }
    }

    .slid-line {
      width: 220px;
      height: 1px;
      background: #ededef;
    }

    .user-body {
      cursor: default;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;

      &:hover {
        color: #2C64F5;
      }

      .el-icon {
        margin-left: 6px;
      }

      img {
        width: 45px;
        height: 45px;
        margin-right: 10px;
      }
    }
  }

  .page-container {
    width: calc(100% - 220px);
    padding-left: 13.3vw;
  }
}

.user-body-p {
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  cursor: default;
}

.user-body-divider {
  margin: 2px !important;
}

:deep(.user-popover) {
  border-radius: 16px !important;
  padding: 6px 9px !important;
  min-width: 112px !important;
}

.user-body-p:hover {
  background: #d8d8d8;
}
</style>
